<template name="shopSwiper">
	<view>
		<uniSwiperDot mode="round" :current="current" :dotsStyles="dotsStyles" :info="swiperList" :minHeight="swiperHeight">
			<swiper class="swiperContter" :autoplay="autoPlay" :interval="interval" :style="{height:swiperHeight+'px'}" @change="slideSwip">
				<block  v-for="(item,index) in swiperList" :key="index">
					<swiper-item  class="swiperSlide" :style="{borderRadius:borderRadius+'px'}" >
						<image class="swiperImg" :src="item.url"  :style="{height:swiperHeight+'px'}"></image>
						
						<!-- <video class="swiperImg" page-gesture controls :src="'http://cdn.peixun.de123.com/store/43daef7340b2408b8126ec2847f81b49.MP4'"></video> -->
					</swiper-item>
				</block>
				
			</swiper>
		</uniSwiperDot>
		
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		components:{uniSwiperDot},
		name: 'shopSwiper', //组件名称
		// 传递参数
		props: {
			autoPlay: {
				type: Boolean,
				default: false
			},
			indicatorDots: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 3000
			},
			borderRadius:{
				type:Number,
				default:10
			},
			swiperList: {
				type: Array,
				default:null
				
			},
			info: {
				type: Array,
				default () {
					return []
				}
			},
			dotsStyles: {
				type: Object,
				default () {
					return {}
				}
			},
			// 类型 ：default(默认) indexes long nav
			mode: {
				type: String,
				default: 'default'
			},
			// 只在 nav 模式下生效，变量名称
			field: {
				type: String,
				default: ''
			}
		},
		// 组件参数
		data() {
			return {
				swiperHeight: parseInt(uni.getSystemInfoSync().screenWidth*0.6) ,
				current:0,
				bannerList:[]
			}
		},
		// 组件方法
		methods: {
			slideSwip:function (e) {
				
				this.current=e.detail.current
			},
			
			
			
		},
		created() {
			
			
		},
	}
</script>

<style lang="less">
	@import "@/common/public.less";

	.swiperContter {
		width: 100%;
		transition: all 0.3s;
	}

	.swiperImg {
		width: 100%;
		display: block;
	}
	.swiperSlide{
		overflow: hidden;
	}
</style>
